import React from 'react'
import getContact from "@/ssr/getContact";
import Map from "@/components/common/Map";

export async function generateMetadata() {
  const contact = await getContact();
  return {
    title: `联系我们 | ${contact.meta_title || contact.name}`,
    description: `${contact.meta_description || contact.description}`,
  };
}

export default async function page() {
  const contact = await getContact();
  const positions = [
    { title: contact.name, position: [113.704514, 34.774198], content: `<div className="text-sm "><strong style="font-size: 14px;font-weight: 600;">${contact?.name}</strong><br/><span style="font-size: 12px;">${contact?.address}</span></div>` },
  ];
  return (
    <div className='max-w-[900px] mx-auto px-4 py-8'>
      <div className='mb-8'>
        <h1 className='text-xl font-bold mb-2'>联系我们</h1>
        <p className='text-gray-600 mb-2 text-sm'>如果您有任何问题或建议，请随时与我们联系。</p>
      </div>
      <div className='mb-2'>
        <h2 className='text-lg font-bold'>地址：</h2>
        <p className='text-gray-600 text-sm'>{contact.address}</p>
      </div>
      <div className='mb-8 w-full aspect-video overflow-hidden'>
        <Map positions={positions} />
      </div>
      <div>
        <h2 className='text-xl font-bold mb-2'>联系方式：</h2>
        <p className='text-gray-600 mb-1 text-sm'>联系人：{contact.contact}</p>
        <p className='text-gray-600 mb-1 text-sm'>邮箱：<a href={`mailto:${contact.email}`} className='text-blue-500 hover:underline'>{contact.email}</a></p>
        <p className='text-gray-600 mb-1 text-sm'>电话：<a href={`tel:${contact.phone}`} className='text-blue-500 hover:underline'>{contact.phone}</a></p>
        <p className='text-gray-600 mb-1 text-sm'>微信：<span>{contact.wechat}</span></p>
      </div>
    </div>
  )
}
